<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="header">
			<h2>排行榜单</h2>
			<u-tabs :list="list1" @click="click"></u-tabs>
			<view class="sele">
				<view class="time" @tap="seleTime">
					{{ date }}
				</view>
				<view class="in" v-if="seleRank == 1">
					<view @tap="seleDate(1)" :class="{ item: true, active: sele == 1 }">日榜</view>
					<view @tap="seleDate(2)" :class="{ item: true, active: sele == 2 }">周榜</view>
				</view>
			</view>
			<view class="info">
				<view class="item" v-if="userInfo.is_leader != 1 && userInfo.is_manager != 1">
					<view class="in">
						<text class="tit">个人盈利</text>
						<text class="txt">{{ randata.money1 }}</text>
					</view>
				</view>
				<view class="item" v-if="userInfo.is_leader != 1 && userInfo.is_manager != 1">
					<view class="in">
						<text class="tit">个人排名</text>
						<text class="txt">{{ randata.rank1 }}</text>
					</view>
				</view>
				<view class="item" v-if="seleRank == 1">
					<view class="in">
						<text class="tit">团队盈利</text>
						<text class="txt">{{ randata.money2 }}</text>
					</view>
				</view>
				<view class="item" v-if="seleRank == 1" @tap="routerTo('/pages/pageB/data/rank')">
					<view class="in">
						<text class="tit">团队排行</text>
						<text class="txt">{{ randata.rank2 }}</text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="rankList" scroll-y="true">
			<u-empty v-if="list.length == 0 && isShow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="暂无排行信息"></u-empty>
			<ul v-else class="list">
				<li class="" v-if="seleRank == 1">
					<view class="msg two">排名</view>
					<view class="msg two">姓名</view>
					<view class="msg two">单数</view>
					<view class="msg two">签单金额</view>
					<view class="msg two">今日盈利</view>
					<view class="msg two">本月盈利</view>
				</li>
				<li v-else>
					<view class="msg one">排名</view>
					<view class="msg two">姓名</view>
					<view class="msg two">通话时常</view>
					<view class="msg two">通话数量</view>
				</li>
				<view class="" v-if="list.length == 0" style="margin-top:50px;">
					<u-loading-icon text="加载中"></u-loading-icon>
				</view>
				<li v-else v-for="(item, index) in list" :key="index">
					<view class="one son">
						<image v-if="index == 0" src="@/static/img/image1.png" mode=""></image>
						<image v-else-if="index == 1" src="@/static/img/image2.png" mode=""></image>
						<image v-else-if="index == 2" src="@/static/img/image3.png" mode=""></image>
						<span v-else>{{ index + 1 }}</span>
					</view>
					<view class="two son">{{ item.nickname }}</view>
					<view class="two son">{{ item.num }}</view>
					<view class="two son">{{ item.total }}</view>
					<view class="two son">{{ item.profile }}</view>
					<view class="two son">{{ item.month_profile }}</view>
				</li>
			</ul>
		</scroll-view>
		<u-datetime-picker :show="show" v-model="value1" mode="date" :maxDate="maxDate" @cancel="show = false"
			@close="show = false" @confirm="dateconfirm" :closeOnClickOverlay="true"></u-datetime-picker>
		<innerTabbar seleTabbar="1"></innerTabbar>
	</view>
</template>

<script>
	import {
		rankLists,
		innerinfo,
		WorkList,
		userranks
	} from '@/api/inner.js';
	import innerTabbar from '../../components/innerTabbar.vue';
	export default {
		components: {
			innerTabbar
		},
		data() {
			return {
				list1: [{
						name: '盈利排行',
						id: 1
					},
					{
						name: '工作量排行',
						id: 2
					}
				],
				sele: 1,
				list: [],
				seleRank: 1,
				isShow: false,
				userInfo: {},
				watermark: '',
				date_type: 1,
				rank_type: 1,
				randata: {},
				date: '',
				show: false,
				value1: Number(new Date()),
				maxDate: Number(new Date()),
			};
		},
		onLoad() {
			let now = new Date();
			let y = now.getFullYear();
			let m = now.getMonth() + 1;
			let d = now.getDate();
			this.date = `${y}-${m}-${d}`;
			this.getInfo();
			this.getList();
			this.getList1();
			this.watermark = uni.getStorageSync('watermark');
		},
		methods: {
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			dateconfirm() {
				let date = new Date(e.value)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate();
				this.date = `${y}-${m}-${d}`
				this.getList()
				this.show = false
			},
			seleDate(e) {
				this.date_type = e;
				this.sele = e;
				if (this.rank_type == 1) {
					this.getList();
				} else {
					this.getList2();
				}
				this.getList1();
			},
			async getList1() {
				let res = await userranks({
					date: this.date,
					rank_type: this.rank_type
				});
				console.log(res);
				this.randata = res.data;
			},
			click(e) {
				this.seleRank = e.id;
				this.date_type = 1;
				this.sele = 1;
				this.rank_type = e.id;
				if (e.id == 1) {
					this.getList();
				} else {
					this.getList2();
				}
				this.getList1();
			},
			//盈利排行榜
			async getList() {
				this.list = [];
				this.isShow = false;
				let res = await rankLists({
					date_type: this.date_type
				});
				console.log(res);
				this.isShow = true;
				this.info = res.data.info;
				this.list = res.data.list;
				// if(res.data.list.length > 0){
				// 	this.list = res.data.list.slice(0, 10)
				// }
			},
			//工作量排行榜
			async getList2() {
				this.list = [];
				this.isShow = false;
				let res = await WorkList({
					date_type: this.date_type
				});
				console.log(res);
				this.isShow = true;
				this.info = res.data.info;
				if (res.data.list) {
					this.list = res.data.list;
				} else {
					this.list = []
				}
			},
			seleTime() {
				this.show = true
			},
			async getInfo() {
				let res = await innerinfo();
				console.log(res);
				this.userInfo = res.data;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 50px);
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;

		.header {
			padding: 30px 15px 10px;
			margin-bottom: 20px;
			background-color: #fff;

			h2 {
				font-size: 22px;
				color: #000;
				margin-bottom: 22px;
				font-weight: 700;
			}

			.sele {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;

				.time {
					font-size: 14px;
					color: #666;
					height: 30px;
					display: flex;
					align-items: center;
				}

				.in {
					display: flex;
					font-size: 13px;
					border-radius: 10px;

					.item {
						padding: 5px 8px;
						border: 1px solid #ccc;
					}

					.item:first-child {
						border-radius: 10px 0 0 10px;
					}

					.item:last-child {
						border-radius: 0 10px 10px 0;
					}

					.active {
						background-color: #0a80f8;
						color: #fff;
						border: none;
					}
				}
			}

			.info {
				display: flex;

				// justify-content: space-between;
				.item {
					width: 25%;
					padding: 0 5px;

					.in {
						background-color: #f8f8f8;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 15px 0;
						border-radius: 10px;

						.tit {
							font-weight: 700;
							margin-bottom: 10px;
						}
					}
				}
			}
		}

		.rankList {
			max-height: calc(100vh - 287px);
			flex: 1;
			background-color: #fff;
			// padding: 0px 15px;

			.list {
				padding: 15px 10px 0;

				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #3d3d3d;
					padding: 15px 0;

					.msg {
						width: 25%;
						color: #a4a5a9;
					}

					.son {
						width: 25%;
					}

					.one {
						text-align: center;
						color: #a4a5a9;

						image {
							width: 30px;
							height: 30px;
						}
					}

					.two {
						text-align: center;
					}

					.for {
						text-align: right;
					}
				}

				li:first-child {
					padding: 0;
				}
			}
		}
	}
</style>